Dans cette leçon, nous allons jeter un œil au module de capture de bureau très simple, la capture
de bureau est essentiellement un wrapper de module électronique pour l'API du périphérique multimédia HTML5 natif, nous permettant d'accéder aux écrans
ainsi aux moniteurs et aux fenêtres d'application.
Ce module ne contient qu'une seule méthode pour cela.
Obtenez des sources.
Voyons un exemple.
J'ajouterai ceci au Renderer James en demandant d'abord ce rendu d'un module à partir du bureau électronique.
Capturez le structuré.
Les égaux nécessitent un électron.
Appelez cette méthode sur ce module, capture de bureau, obtenez des sources, le premier argument étant un objet de configuration dans
lequel nous pouvons spécifier le type de sources que nous voulons obtenir des types en prenant un tableau.
Et dans ce tableau, nous pouvons spécifier soit la fenêtre d'écran, soit l'écran et la fenêtre étant les
deux seuls types de source disponibles, je dirai écran pour l'instant, obtenir des retours traités, une promesse ainsi résolue en passant
un rappel qui nous fournit un argument des sources étant nos écrans selon la configuration.
Je me déconnecte pour que nous puissions l'inspecter et noter que, comme pour toute promesse, vous pouvez également détecter toute erreur
potentielle avec une méthode catch sur cet objet de promesse.
Mais je vais laisser cela de côté pour le moment.
Sauvegarde ça.
Et ils sont dans les outils de développement, nous obtenons un tableau avec deux entrées, car j'ai deux écrans, mes ordinateurs portables
à la fois en affichage et un moniteur externe, écran un et écran deux.
Je vais étendre un peu ce développement à l'Espagne afin que nous puissions voir toutes les propriétés de ces objets là-bas.
Et je nommerais une vignette de type image native, dont nous discuterons dans une minute, et un autre identifiant d'écran
quelque peu générique.
Il n'y a donc aucun moyen réel de savoir quel écran est quel écran.
Mais le premier sera toujours le principal.
Dans mon cas, mon moniteur externe, le vrai peu utile de l'objet écran étant les vignettes.
Ceux-ci nous fournissent une image de l'écran lorsque la source a été demandée.
Je vais rendre cela dans l'application.
Contenu à démontrer sur HTML indexé, ajoutez une balise d'image, en laissant la source vide afin que nous puissions la définir manuellement
et en donnant à cette balise un identifiant avec lequel la sélectionner.
Capture d'écran.
Et pour ne pas capturer la capture d'écran immédiatement pendant le chargement de l'application, qui sera
vide, bien sûr, ajoutez un bouton pour déclencher cela avec une signature, ceci un identifiant ainsi qu'un bouton de capture d'écran, disons, obtenir une capture d'écran, je vais
copier l'ID afin que nous puissions attacher un écouteur d'événement à ce bouton.
Document dot, récupérez l'élément par I. RÉ. , bouton de capture d'écran, ajoutez un écouteur d'événement au clic.
Ajout d'un rappel à exécuter lorsque ce bouton est cliqué, que nous pouvons appeler cette fonction de raccourcis comme
ceci cette fois, cependant, au lieu de simplement se déconnecter, les sources voudront définir la vignette de
l'affichage principal, le premier à être affiché dans cette nouvelle balise d'image.
Sélectionnez l'étiquette d'image par son I. RÉ. document, élément cible par I. RÉ. Capture d'écran que nous
lui avons attribuée, définissant son attribut source sur la vignette du premier élément de l'index zéro des sources.
Maintenant, comme mentionné, cette image miniature est une image négative d'électrons, quelque chose que nous aborderons plus en détail
dans la section des modules partagés plus tard.
Mais fondamentalement, une image négative aux électrons n'est qu'une instance pratique d'une classe qui nous permet de mieux travailler avec des
images, par exemple, pour obtenir cette image miniature dans un format neutre en données, ce qui signifie que nous n'avons pas besoin
de créer un lien vers un fichier réel, mais intégrez plutôt les données d'image directement dans la balise d'image.
On peut dire vignette.
Donc, cet instant d'image native appelle à la neutralité des données.
Ce que nous attendons maintenant en cliquant sur ce bouton est d'obtenir mes deux écrans car les soucoupes prennent
la vignette de l'affichage principal étant celui que nous regardons et l'afficher dans cette nouvelle balise d'image
en convertissant les données d'image en données, vous êtes tous sûr.
Je ferme les outils de développement.
Et c'est une capture d'écran plutôt petite mais néanmoins complète de mon affichage ou écran principal, nous pouvons également capturer
cette vignette dans une taille plus grande pour revenir aux options d'obtention des sources, la taille de la vignette à un objet de taille, un objet de
taille électronique étant un objet simple avec une propriété width et height, identique à celle que nous utilisons pour définir la
taille de la fenêtre du navigateur.
Je vais faire en sorte que cette vignette ait une largeur de 19 vingt et une hauteur de dix.
Donc capturer un rapport d'aspect standard de 16 par 9.
Et pour empêcher cette image de déborder de la fenêtre de notre application, donnez-lui un attribut de largeur 100% sûr et le moteur de
rendu J. S ..
Je ferme à nouveau les outils de développement.
Cliquez sur, obtenez une capture d'écran.
Et là cette fois capturer la nouvelle taille de vignette plus grande de cet écran principal.
L'autre option source que j'ai mentionnée est window, nous permettant ainsi d'obtenir la même chose pour chaque
fenêtre ouverte sur la machine de l'utilisateur, en déconnectant également les sources.
Sauver.
Cliquez à nouveau sur le bouton Obtenir une capture d'écran, cette fois pour obtenir une image miniature de
la première fenêtre dans le tableau des sources et là, nous voyons la fenêtre principale capturée car c'est ma fenêtre principale pour le moment,
ou la fenêtre focalisée.
Celui-ci ici, le premier objet cette fois-ci, le nom de la fenêtre étant le titre de la fenêtre, les deux autres
fenêtres étant à l'envers se sont ouvertes sur mon écran secondaire.
Ainsi, un module extrêmement simple à utiliser ultérieurement couvrira l'image native, saisira plus en détail et verra
également comment obtenir des détails spécifiques sur un affichage.